<template>
    <div class="body">
        <!-- 头部 -->
        <div class="header">
            <div class="header-title"><p>基本信息</p></div>
            <div class="base-input">
                <el-form 
                :model="ruleForm" 
                :rules="rules" 
                ref="ruleForm" 
                label-width="100px" 
                class="demo-ruleForm form clear">
                    <el-form-item label="进货仓库：" prop="inDepot" class="form-item">
                        <el-select v-model="ruleForm.inDepot" >
                        <el-option v-for="item in inDepot" :key="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="供货厂商：" prop="vendor" class="form-item">
                        <el-select v-model="ruleForm.vendor">
                        <el-option
                            v-for="item in vendorOptions"
                            :key="item"
                            :value="item"
                        >
                        </el-option>
                        </el-select>
                    </el-form-item>
                    
                </el-form>
            </div>
        </div>

        <!-- 中间数据第一部分 -->
        <div class="content">
            <div class="title"><p>选择商品</p></div>
            <div class="form-wrap">
                <el-form :inline="true" :model="formInline" class="demo-form-inline form">
                    <!-- <el-form-item label="选择品牌:">
                        <el-input v-model="formInline.band"></el-input>
                    </el-form-item>
                    <el-form-item label="选择分类:">
                        <el-select v-model="formInline.class" >
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="商品标题:">
                        <el-input v-model="formInline.title"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit(formInline.title, page, size)">搜索</el-button>
                    </el-form-item>
                </el-form>
                <div class="search-wrap">
                    <div class="title"><p>搜索结果</p></div>
                    <div>
                        <el-table
                            :data="tableData"
                            border
                            style="width: 100%">
                            <el-table-column prop="name" label="商品名称" width="180">
                            </el-table-column>
                            <el-table-column prop="bigUnit" label="大单位" width="180">
                            </el-table-column>
                            <el-table-column prop="bigPrice" label="大单位单价">
                            </el-table-column>
                            <el-table-column prop="smallUnit" label="小单位">
                            </el-table-column>
                            <el-table-column prop="smallPrice" label="小单位价格">
                            </el-table-column>
                            <el-table-column prop="inventory" label="现有库存">
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                <el-button
                                    @click="handleAdd(scope.row.id)"
                                    type="text"
                                    size="small"
                                    >添加</el-button
                                >
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="page-wrap">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="total"
                            class="page"
                            :page-size="size"
                            @current-change="currentChange"
                            >
                            </el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中间数据第二部分 -->
         <div class="data">
             <div class="title"><p>商品明细</p></div>
             <!-- <GoodsDetails/> -->
             <div>
                <el-table :data="resultData" border style="width: 100%" class="result-data">
                    <el-table-column prop="name" label="商品名称" width="180">
                    </el-table-column>
                    <el-table-column prop="bigUnit" label="单价/大单位" width="180">
                    </el-table-column>
                    <el-table-column label="数量">
                        <template slot-scope="scope">
                          <el-input-number v-model="scope.row.bigCount" 
                          @change="bigChange(scope.row.bigCount,scope.row.id,scope.row.smallCount)" 
                          size="mini" :min="1" :max="30" label="描述文字" class="count-number"></el-input-number>
                        <!-- <span
                            @click="
                            decrease(
                                scope.row.bigCount,
                                scope.row.id,
                                scope.row.smallCount
                            )
                            "
                            class="icon"
                            >-</span
                        >
                        <span class="icon-num">{{ scope.row.bigCount }}</span>
                        <span
                            @click="
                            increase(
                                scope.row.bigCount,
                                scope.row.id,
                                scope.row.smallCount
                            )
                            "
                            class="icon"
                            >+</span
                        > -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="smallUnit" label="小单位价格">
                    </el-table-column>
                    <el-table-column label="数量">
                        <template slot-scope="scope">
                          <el-input-number v-model="scope.row.smallCount" 
                         @change="smallChange(scope.row.bigCount,scope.row.id,scope.row.smallCount)" size="mini" 
                         :min="1" :max="30" label="描述文字" class="count-number"></el-input-number>
                        <!-- <span
                            @click="
                            reduce(scope.row.bigCount, scope.row.id, scope.row.smallCount)
                            "
                            class="icon"
                            >-</span
                        >
                        <span class="icon-num">{{ scope.row.smallCount }}</span>
                        <span
                            @click="
                            raise(scope.row.bigCount, scope.row.id, scope.row.smallCount)
                            "
                            class="icon"
                            >+</span
                        > -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="money" label="金额">
                        <!-- <template slot-scope="scope"><p>{{sum()(scope.row.countB,scope.row.countS)}}</p></template> -->
                    </el-table-column>
                    <el-table-column prop="protectedDate" label="生产日期">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                        <el-button
                            @click="handleDelete(scope.row.id)"
                            type="text"
                            size="small"
                            >删除</el-button
                        >
                        </template>
                    </el-table-column>
                    </el-table>
             
             <div class="sum">
                 <p>商品共：{{this.resultData.length}}</p>
                 <p>金额合计：{{count}}</p>
             </div>
            </div>
         </div>

         <!-- 付款信息 -->
         <div class="paydetails">
            <div class="title"><p>付款信息</p></div>
            <div class="pay">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm form clear">
                    <el-form-item label="付款信息：" prop="payType" class="form-item">
                        <el-select v-model="ruleForm.payType" >
                        <el-option
                            v-for="item in payTypeOptions"
                            :key="item"
                            :value="item"
                        >
                        </el-option>
                        </el-select>
                    </el-form-item>      
                </el-form>
            <!-- <span>客户余额：元</span> -->
            </div>
            <div class="bonus clear">
                <p>预付款:</p>
                <el-input class="money" v-model="count"></el-input>
                <!-- <div>
                <p>实付金额：</p>
                <el-input class="money"></el-input>
                </div> -->
                <div>
                    <p>优惠金额：</p>
                    <el-input class="money"></el-input>
                </div>
            </div>
            <p class="must">应付款金额:{{ count }}元</p>
            <button @click="submit(count,ruleForm.inDepot,ruleForm.payType,ruleForm.vendor)">提交</button>
         </div>
    </div>
</template>


<script>
import {
  downRenderApi,
  submitNewApi,
  searchApi,
  addApi,
  goodsRenderApi,
  submitEditApi,
  renderAddApi,
  deleteListApi,
  increaseDApi,
} from "../../http/InventoryApi/AddInApi";
  export default {
    data() {
      return {
        ruleForm: {
            inDepot:'',
            vendor:'',
            payType:''
        },
        formInline: {
            brand:'',
            class:'',
            title:''
        },
        // 基本信息选择框渲染内容
        vendorOptions:[],
        inDepot:[],
        payTypeOptions:['微信','支付宝','现金'],

        rules: {
          inDepot: [
            { required: true, message: '请选择进货仓库', trigger: 'change' }
          ],
          vendor: [
            { required: true, message: '请选择供货厂商', trigger: 'change' }
          ],
          payType:[
              { required: true, message: '请选择付款方式', trigger: 'change' }
          ]
        },
        // 搜索结果：
      tableData: [],

      // 添加之后的结果
      resultData: [],
       page: 1,
        size: 5,
        total: null,
        searchState: 0,
      };
    },
    computed: {
    // 金额
    // sum() {
    //     function count(countB,countS) {
    //         return countB*this.num+countS*this.cout
    //     }
    //     return count
    // },
    // 金额合计
    count() {
      var all = 0;
      for (let i = 0; i < this.resultData.length; i++) {
        all += this.resultData[i].money;
      }
      //    return this.resultData.reduce((a,b)=>{
      //     return a+b
      //     },0)
      return all;
    },
  },
  activated() {
    // 下拉框渲染
    this.downRender();
    // 编辑渲染
    this.editRender();
    this.goodsRender(this.page, this.size);
    this.searchState = 0;
    this.renderResults();
  },
  deactivated() {
    this.show = false;
    this.$nextTick(() => {
      this.resultData = [];
      this.show = true;
    });
  },
  beforeRouteUpdate() {
    this.ruleForm.id = "";
      this.ruleForm.aname = "";
      this.ruleForm.payType = "";
      this.ruleForm.oname = ""
      this.ruleForm.inDepot = ""
      this.ruleForm.createDate = "";
      this.ruleForm.state = "";
      this.ruleForm.comments = "";
      this.ruleForm.vendor ="";
      this.resultData=[]
  },
  updated() {
    // console.log(this.resultData.amount)
  },
  methods: {
    // 大单位添加
    bigChange(bigCount, id, smallCount) {
      console.log(bigCount, id, smallCount,'777')
      increaseDApi(bigCount, id, smallCount).then((res) => {
        console.log(res, "增加 ");
        this.renderResults();
      });
    },
    // 小单位添加
    smallChange(bigCount, id, smallCount) {
      console.log(bigCount, id, smallCount,'777')
      increaseDApi(bigCount, id, smallCount).then((res) => {
        console.log(res, "增加 ");
        this.renderResults();
      });
    },
    // // 大单位添加
    // increase(bigCount, id, smallCount) {
    //   bigCount = bigCount + 1;
    //   console.log(55);
    //   increaseDApi(bigCount, id, smallCount).then((res) => {
    //     console.log(res, "增加 ");
    //     this.renderResults();
    //   });
    // },
    // // 大单位减少
    // decrease(bigCount, id, smallCount) {
    //   if (bigCount >= 1) {
    //     bigCount = bigCount - 1;
    //     increaseDApi(bigCount, id, smallCount).then((res) => {
    //       console.log(res, "减少 ");
    //       this.renderResults();
    //     });
    //   } else {
    //     bigCount;
    //   }
    // },
    // // 小单位添加
    // raise(bigCount, id, smallCount) {
    //   smallCount = smallCount + 1;
    //   increaseDApi(bigCount, id, smallCount).then(() => {
    //     this.renderResults();
    //   });
    // },
    // // 小单位减少
    // reduce(bigCount, id, smallCount) {
    //   if (bigCount >= 1) {
    //     smallCount = smallCount - 1;
    //     increaseDApi(bigCount, id, smallCount).then(() => {
    //       this.renderResults();
    //     });
    //   } else {
    //     smallCount;
    //   }
    // },
    // 下拉框渲染
    downRender() {
      downRenderApi()
        .then((res) => {
          let data = res.data.data;
          for (let i = 0; i < data.length; i++) {
            this.inDepot.push(data[i].depot);
            this.vendorOptions.push(data[i].vendor);
            // this.payTypeOptions.push(data[i].payType);
          }
          this.inDepot = [...new Set(this.inDepot)];
          this.vendorOptions = [...new Set(this.vendorOptions)];
          // this.payTypeOptions = [...new Set(this.payTypeOptions)];
        })
        .catch((err) => {
          console.log("下拉框数据渲染获取失败", err);
        });
    },
    // 编辑数据渲染
    editRender() {
      this.ruleForm.id = this.$route.query.id;
      this.ruleForm.aname = this.$route.query.aname;
      this.ruleForm.payType = '微信';
      this.ruleForm.oname = this.$route.query.oname;
      this.ruleForm.inDepot = this.$route.query.depot;
      this.ruleForm.createDate = this.$route.query.createDate;
      this.ruleForm.state = this.$route.query.state;
      this.ruleForm.comments = this.$route.query.comments;
      this.ruleForm.vendor = this.$route.query.vendor;
      
    },
    // 搜索商品渲染
    goodsRender(page, size) {
      goodsRenderApi(page, size)
        .then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.total;
          console.log(res, "678", res.data.total);
        })
        .catch((err) => {
          console.log("商品列表渲染失败", err);
        });
    },
    //  根据条件搜索商品
    onSubmit(name, page, size) {
      this.searchState = 1;
      searchApi(name, page, size)
        .then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.total;
          console.log("888", res);
        })
        .catch((err) => {
          console.log("获取搜索条件结果失败", err);
        });
    },
    // 渲染添加后的数据
    renderResults() {
      let orderId = this.$route.query.id ? this.$route.query.id : 0;
      // let orderId = 10018
      if (orderId) {
        renderAddApi(orderId)
          .then((res) => {
            this.resultData = res.data.data;
            console.log(this.resultData);
            console.log("添加结果渲染成功", res.data);
          })
          .catch((err) => {
            console.log("添加结果渲染失败", err);
          });
      } else {
        return false;
      }
      // 还需要一个添加接口
    },
    // 添加商品
    handleAdd(id) {
      let orderId = this.$route.query.id ? this.$route.query.id : 0;
      // let orderId = 10018
      console.log("上一级id", orderId);
      if (orderId) {
        // 渲染商品明细
        addApi(id, orderId)
          .then((res) => {
            console.log(res, "999");
            this.renderResults();
          })
          .catch((err) => {
            console.log("获得商品明细失败", err);
          });
        // 渲染
      }
      // 添加
    },

    // 删除
    handleDelete(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(id, "id");
          deleteListApi(id)
            .then(() => {
              // 删除之后再渲染一次
              let orderId = this.$route.query.id ? this.$route.query.id : 0;
              // let orderId = 10018
              renderAddApi(orderId)
                .then((res) => {
                  console.log(res);
                  this.resultData = res.data.data;
                })
                .catch((err) => {
                  console.log("获得商品明细失败", err);
                });
            })
            .catch((err) => {
              console.log("接口请求删除失败：", err);
            });

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击换页数
    currentChange(page) {
      this.page = page;
      if (!this.searchState) {
        this.goodsRender(page, this.size);
      } else {
        this.onSubmit(this.formInline.title, page, this.size);
      }
    },
    // 提交信息
    submit(amount,depot,payType,vendor) {
      let orderId = this.$route.query.id ? this.$route.query.id : 0;
      // let orderId = 10018
    //   let results={}
    //     results={
    //         mount:this.resultData.length,
    //         amount:this.count,
    //         aname:this.ruleForm.aname,
    //         comments:this.$route.query.comments,
    //         createDate:this.$route.query.createDate,
    //         depot:this.ruleForm.depot,
    //         id:orderId,
    //         oname:this.ruleForm.oname,
    //         payType:this.ruleForm.payType,
    //         state:this.$route.query.state,
    //         time:this.$route.query.time,
    //         uname:this.$route.query.uname
    //     }
      if (orderId) {
        submitEditApi(amount,depot,orderId,payType,vendor)
         .then(()=>{
            this.$router.push("/inmangement/in");
         })
      } else {
        submitNewApi();
        // 跳转路由
        this.$router.push("/outmangement/out");
      }
    },
  },
}
</script>


<style lang="scss" scoped>
@import "../../assets/sass/var.scss";
.body {
    .header {
        width: 90%;
        margin: 0 5% 0;
        .header-title {
            height: 50px;
            background: $background-color;
            line-height: 50px;
            font-size: 12px;
            color: $context-color;
            p {
                margin-left: 10px;
            }
        }
        .base-input {
            height: 80px;
            border:solid 1px rgb(225, 225, 225);
            box-sizing: border-box;
            .form {
                margin-top:20px;
                .form-item {
                float: left;
                }
            }
        }
    }
    .content {
        width:90%;
        margin:20px 5% 0;
        border:solid 1px rgb(225, 225, 225);
        .title {
            height: 50px;
            background: $background-color;
            p {
                font-size: 12px;
                color:$context-color;
                line-height: 50px;
                margin-left: 10px
            };
        }
        .form {
            margin-top:20px;
            margin-left: 20px;
        }
        .search-wrap {
            width: 90%;
            margin:20px 5% 0;
            .page-wrap {
            height: 50px;
            .page {
                float: right;
                margin-top: 10px;
            }
          }
        }
        
    }
    .data {
        width:90%;
        margin:20px 5% 0;
        border:solid 1px rgb(225, 225, 225);
        .title {
            height:50px;
            background: $background-color;
            p {
                line-height: 50px;
                font-size: 12px;
                margin-left: 10px;
            }
        }
        .result-data {
          .count-number {
            width: 100px;
            // padding:0 20px;
            box-sizing:border-box;
          }
        }
        .sum {
            margin-left: 20px;
            height: 50px;
            p {
                font-size: 20px;
                margin-right: 20px;
                float: left;
                line-height: 50px;
            }
        }
    }
    .paydetails {
        width: 90%;
        margin:20px 5%;
        border:solid 1px rgb(225, 225, 225);
        .title {
            height:50px;
            background: $background-color;
            p {
                line-height: 50px;
                font-size: 12px;
                margin-left: 10px;
            }
        }
        .form {
            margin-top: 10px;
            float: left;
        }
        .pay {
            height: 73px;
            span {
                height: 50px;
                display: inline-block;
                line-height: 50px;
                margin-left: 20px;
                padding-top: 5px;
                box-sizing: border-box;
                font-size: 12px;
            }
        }
        .bonus {
            height: 50px;
            margin-left: 20px;
            p {
                float: left;
                font-size: 14px;
                margin-top: 10px;
            }
            .money {
                width:223px;
                margin-left:10px;
            }
            div {
                float: left;
                margin-left: 20px;
            }
        }
        .must {
            margin-left: 20px;
        }

        button {
            width: 200px;
            height: 40px;
            margin-left: 30px;
            margin-top: 20px;
            background: $panel-color;
            border: none;
            border-radius: 5px;
            color:white;
            margin-bottom: 20px;
        }
    }
}
</style>